<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>这是一个段落</p>
		<span>这是一个span</span>
		这是一个简单文字，没有标签
		还有
		<table border="" cellspacing="" cellpadding="">
			<!-- <thead>
				<tr>
					<th>姓名</th>
					<th>语文</th>
					<th>英语</th>
					<th>数学</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody> -->
		</table>
		<script>
			let p = document.getElementsByTagName("p")[0];
			// p.className = "";设置样式，单个值
			// p.classList：多个值
			// p.innerHTML：插入html代码
			// p.innerText：纯文本，就算是html代码，也不会解析
			// p.innerHTML = "<input type='button' value='这是添加的按钮' />"
			p.innerText = "<input type='button' value='这是添加的按钮' />"

			let table = document.getElementsByTagName("table")[0];
			let thead = document.createElement("thead");
			//将thead标签添加到table标签中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let titles = ["姓名", "语文", "英语", "数学"];
			for (let item of titles) {
				let th = document.createElement("th");
				th.innerText = item;
				tr.appendChild(th);
			}

			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			let data = [{
				name: "小明",
				yuwen: 80,
				yingyu: 80,
				shuxue: 80
			},{
				name: "小红",
				yuwen: 90,
				yingyu: 70,
				shuxue: 90
			},{
				name: "小杰",
				yuwen: 70,
				yingyu: 100,
				shuxue: 100
			},{
				name: "平均",
				yuwen: 0,
				yingyu: 0,
				shuxue: 0
			}];
			let yuwenSum = 0;
			let yingyuSum = 0;
			let shuxueSum = 0;
			let yuwen_value = 0;
			let yingyu_value = 0;
			let shuxue_value = 0;
			for (let index in data) {
				let item = data[index];
				tr = document.createElement("tr");
				// console.log("index:::" + index);
				// console.log("data.length:::" + data.length);
				// console.log("index === (data.length - 1):::" + (index === (data.length - 1)));
				// console.log(typeof index);
				// console.log(typeof (data.length - 1));
				if(parseInt(index) === (data.length - 1)) {
					//最后一行
					// console.log("最后一行");
					yuwen_value = yuwenSum / (data.length - 1);
					yingyu_value = yingyuSum / (data.length - 1);
					shuxue_value = shuxueSum / (data.length - 1);
				} else {
					yuwenSum += item.yuwen;
					yingyuSum += item.yingyu;
					shuxueSum += item.shuxue;
					
					yuwen_value = item.yuwen;
					yingyu_value = item.yingyu;
					shuxue_value = item.shuxue;
				}
				
				let td = document.createElement("td");
				td.innerText = item.name;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = yuwen_value;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = yingyu_value;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = shuxue_value;
				tr.appendChild(td);
				tbody.appendChild(tr);
			}
			
			// tr = document.createElement("tr");
			// let td = document.createElement("td");
			// td.innerText = "平均";
			// tr.appendChild(td);
			// td = document.createElement("td");
			// td.innerText = Math.floor(yuwenSum / data.length);
			// tr.appendChild(td);
			// td = document.createElement("td");
			// td.innerText = Math.floor(yingyuSum / data.length);
			// tr.appendChild(td);
			// td = document.createElement("td");
			// td.innerText = Math.floor(shuxueSum / data.length);
			// tr.appendChild(td);
			// tbody.appendChild(tr);
		</script>
	</body>
</html>
